<template>
  <div id="budget">
    <!-- 3.推广预算 -->
    <div class="showDiv02">
      <!-- <img src="@/assets/wang/work/talent.png" alt class="talentBanner" /> -->
      <div class="talentBanner">智能匹配达人</div>
      <img src="@/assets/shi/talent_nav2.png" alt class="goodsIcon" />
      <div class="budgetBox" v-if="boxShow != true">
        <div class="topBox">
          <div class="leftBox">
            <div>
              <div data-v-378b4e67 class="notice-box"></div>
              推广预算
            </div>

            <p>
              请选择推广预算
              <span>(按小时计算)</span>
            </p>
          </div>
          <p class="rightText" @click="seeHistory">
            查看历史匹配记录 <img src="@/assets/li/more.png" />
          </p>
        </div>
        <div class="budgetRadio">
          <div
            class="radioItem"
            :class="{ activePrice: activePrice == 6 }"
            @click="activePrice = 6"
          >
            <p :class="{ activeText: activePrice == 6 }">＜1万元</p>
            <p :class="{ activeText: activePrice == 6 }">尝鲜体验</p>
          </div>
          <div
            class="radioItem"
            :class="{ activePrice: activePrice == 5 }"
            @click="activePrice = 5"
          >
            <p :class="{ activeText: activePrice == 5 }">1-3万元</p>
            <p :class="{ activeText: activePrice == 5 }">基础预算</p>
          </div>
          <div
            class="radioItem"
            :class="{ activePrice: activePrice == 4 }"
            @click="activePrice = 4"
          >
            <p :class="{ activeText: activePrice == 4 }">3-5万元</p>
            <p :class="{ activeText: activePrice == 4 }">基础预算</p>
          </div>
          <div
            class="radioItem"
            :class="{ activePrice: activePrice == 3 }"
            @click="activePrice = 3"
          >
            <p :class="{ activeText: activePrice == 3 }">5-8万元</p>
            <p :class="{ activeText: activePrice == 3 }">较多预算</p>
          </div>
          <div
            class="radioItem"
            :class="{ activePrice: activePrice == 2 }"
            @click="activePrice = 2"
          >
            <p :class="{ activeText: activePrice == 2 }">8-10万元</p>
            <p :class="{ activeText: activePrice == 2 }">较多预算</p>
          </div>
          <div
            class="radioItem"
            :class="{ activePrice: activePrice == 0 }"
            @click="activePrice = 0"
          >
            <p :class="{ activeText: activePrice == 0 }">
              <input
                type="number"
                placeholder="自定义"
                class="myPrice"
                v-model="priceMine"
                @input="checkPrice"
              />
              万元
            </p>
            <p :class="{ activeText: activePrice == 0 }">自定义预算</p>
          </div>
        </div>
        <div class="buttonBox">
          <button @click="lastPage">上一步</button>
          <button
            @click="toMatch"
            class="matchBtn"
            v-if="
              activePrice == 2 ||
                activePrice == 3 ||
                activePrice == 4 ||
                activePrice == 5 ||
                activePrice == 6 ||
                priceMine != 0
            "
          >
            智能匹配
          </button>
          <button class="matchBtn matchBtn01" v-else>智能匹配</button>
          <button @click="toEgImg">查看示例</button>
        </div>
      </div>
    </div>
    <!-- 剩余次数 -->
    <el-dialog
      :visible.sync="useCountPop"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="400px"
    >
      <div class="useCountBox">
        <p class="text01">{{ vipName }}每月可使用{{ numberofvisits }}次</p>
        <p class="text02">
          当前已使用
          <span>{{ numberofvisits - surplusCount }}次</span>，剩余
          <span>{{ surplusCount }}次</span>，
        </p>
        <p class="text03">
          本次查询将消耗
          <span>1次</span>机会，确认查询吗？
        </p>
        <div class="optionBox">
          <button
            class="upgradeBtn"
            v-if="surplusCount == 0 && isMaxVip == false"
            @click="toBuy"
          >
            升级会员
          </button>
          <el-popover placement="bottom" trigger="hover">
            <div class="message_content">
              <div class="popper_arrow"></div>
              <img src="@/assets/img/xiaozhushou_qr.jpg" />
              <div>工作日：9:30--18:30</div>
            </div>
            <button
              class="upgradeBtn"
              v-if="surplusCount == 0 && isMaxVip == true"
              slot="reference"
            >
              联系客服
            </button>
          </el-popover>
          <button
            class="upgradeBtn"
            v-if="surplusCount > 0"
            @click="
              useCountPop = false;
              boxShow = true;
              productmatch();
            "
          >
            确定
          </button>
          <button class="cancelBtn" @click="useCountPop = false">取消</button>
        </div>
      </div>
    </el-dialog>
    <div class="boxShow" v-if="boxShow">
      <div class="boxShow_02">
        <div
          v-loading="showLoading1"
          class="showLoading1"
          element-loading-spinner="el-icon-loading"
        ></div>
        正在为您匹配中，请于3分钟后在历史匹配记录 中查看匹配结果
      </div>
      <button class="matching02" @click="seeHistory">我知道了</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "budget",
  components: {},
  data() {
    return {
      showLoading1: true,
      activePrice: 6, //6:《一万元
      priceMine: "",
      useCountPop: false,
      vipLevel: "",
      numberofvisits: 0, //总次数
      surplusCount: 0, //剩余次数
      matchLoading: false,
      cancel01: null,
      vipName: "",
      isMaxVip: Boolean, //是否是最高级别的会员
      boxShow: false,
      uLevel:localStorage.getItem('vipLevel')
    };
  },
  computed: {},
  watch: {
    priceMine(n) {
      if (n < 0) {
        this.priceMine = n * -1;
      }
    }
  },
  created() {
    document.title = "智能找达人&智能分析服务平台-掌上精选";
  },
  mounted() {},

  methods: {
    lastPage() {
      this.$router.push({
        path: `/inAnalysis/SearchGoodsAly01`,
        query: {
          alive: 1
        }
      });
    },
    seeHistory() {
      this.boxShow = false;
      let router = this.$router.resolve({
        path: `/inAnalysis/matchHistory`
      });
      window.open(router.href, "_blank");
    },
    toMatch() {
      let that = this;
      that.$axios
        .get("/api/customer/GetNumberofvisitsDetailed", {
          params: {
            API: "/api/intelligent/productmatching" //要访问的接口地址
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            // 0是不限制次数
            // if (res.data.data.numberofvisits > 0) {
              that.numberofvisits = res.data.data.numberofvisits; //限制次数
              that.vipName = res.data.data.vipName; //vipname
              that.surplusCount = res.data.data.surplusCount; //剩余次数
              that.isMaxVip = res.data.data.isMaxVip; //是否是最高级别的会员

              that.useCountPop = true;
            // } else {
            //   that.productmatch();
            // }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    productmatch() {
      let that = this;
      if (
        that.activePrice != 1 &&
        that.activePrice != 2 &&
        that.activePrice != 3 &&
        that.activePrice != 4 &&
        that.activePrice != 5 &&
        that.activePrice != 6
      ) {
        that.activePrice = Number(that.priceMine * 10000);
      }
      // console.log('priceMine',this.priceMine);
      // console.log('activePrice',this.activePrice);
      localStorage.setItem("matchTlentPrice", this.activePrice);
      that.matchLoading = true;
      that.$axios
        .post(
          "/api/intelligent/productmatching",
          {
            SeceondCategory: this.$route.query.goodsTypeTwo,
            // FirstCategory: this.$route.query.goodsType,
            ProductPriceInterval: this.$route.query.goodsPrice,
            CommissionRateInterval: this.$route.query.goldsPrice,
            //ProId: localStorage.getItem("matchTlentProId"),
            Price: localStorage.getItem("matchTlentPrice") //价格 1=10w+；2=8w-10w；3=5w-8w；4=3w-5w；5=1w-3w；6=1w以下，其他自定义
            // Price: 1,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          },
          {
            timeout: 0 //超时时间不限制
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            console.log(res)
            localStorage.setItem("mTalentHasData", true);
            let talentList = res.data.data;
            let talentIdList = [];
            let talentScoreList = [];
            // id
            if (res.data.data != null) {
              talentList.forEach(element => {
                talentIdList.push(element.authorId);
              });
              // 匹配分
              talentList.forEach(element => {
                talentScoreList.push(element.score);
              });
              // 存储id和分数的数组 和时间总数 保证刷新后不请求接口
              let matchTalentInfo = {};
              matchTalentInfo.matchTime = res.data.msg;
              matchTalentInfo.total = res.data.count;
              localStorage.setItem(
                "matchListDetail",
                JSON.stringify(talentList)
              );
              localStorage.setItem(
                "matchTalentInfo",
                JSON.stringify(matchTalentInfo)
              );
              localStorage.setItem("notMatchId", 1);
            }
            that.matchLoading = false;
          } else if (res.data.code == 1002) {
            // that.talentList = [];
            localStorage.setItem("mTalentHasData", false);
            that.matchLoading = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 查看示例图
    toEgImg() {
      let that = this;
      // console.log("routerName", this.routerName);
      let router = this.$router.resolve({
        path: `/egImg/matchEg`
      });
      window.open(router.href, "_blank");
    },
    // 自定义最大8位
    checkPrice() {
      if (this.priceMine > 99999999) {
        this.priceMine = 99999999;
      }
    },
    // 升级会员
    toBuy() {
      // let router = this.$router.resolve({
      //   path: `/talent_main/buy/0`
      // });
      // window.open(router.href, "_blank");
      let goLevel = this.upLevel(this.uLevel);
      let router = this.$router.resolve({
        path: `/talent_main/buy?l=${goLevel}`,
      });
      window.open(router.href, '_blank');
    },
    upLevel(level) {  //根据次数权限，获取比当前等级高一级的会员等级
      let aLevel = '';
      if(level == 0 || level == 3){ //免费版、体验版跳到vip
        aLevel = 4;
      }else if(level == 4){ //vip跳到svip，
        aLevel = 5;
      }else if(level == 5 || level == 1){ //vip企业版和svip个人版触发权限判断时，都跳到plus，
        aLevel = 2;
      }
      return aLevel;
    },
  }
};
</script>
<style lang="less" scoped>
#budget {
  // 弹窗
  .useCountBox {
    box-sizing: border-box;
    width: 400px;
    height: 260px;
    background-color: #ffffff;
    border-radius: 4px;
    p {
      text-align: center;
      span {
        font-size: 16px;
        color: #fd7f2c;
      }
    }
    .text01 {
      font-size: 20px;
      color: #222222;
      padding-top: 43px;
    }
    .text02 {
      padding-top: 16px;
      font-size: 16px;
      color: #555555;
      line-height: 30px;
    }
    .text03 {
      font-size: 16px;
      color: #555555;
      line-height: 30px;
    }
    .optionBox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 40px;
      .upgradeBtn {
        width: 120px;
        height: 44px;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 16px;
        color: #ffffff;
      }
      .cancelBtn {
        width: 120px;
        height: 44px;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        font-size: 16px;
        color: #fd7f2c;
        margin-left: 30px;
      }
    }
  }
  .showDiv02 {
    overflow: hidden;
    .talentBanner {
      width: 100%;
      height: 54px;
      text-align: center;
      line-height: 54px;
      border-radius: 4px;
      margin-top: 14px;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      background: url('~@/assets/shi/banner.png');
    }
    // .talentBanner {
    //   width: 1201px;
    //   height: 54px;
    //   border-radius: 4px;
    //   margin-top: 14px;
    // }
    .goodsIcon {
      width: 455px;
      height: 64px;
      display: block;
      margin: 26px auto;
    }
    .showGoods {
      width: 100%;
      min-height: 822px;
      background-color: #ffffff;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
      .topBox {
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 14px;
          color: #ff7419;
          cursor: pointer;
        }
      }
      //   条件
      .condition {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 20px;
        .title {
          font-size: 14px;
          color: #222222;
        }
        .conditionItem {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-left: 17px;
          .itemTitle {
            font-size: 14px;
            color: #555555;
            padding-right: 10px;
          }
          .itemTitle1 {
            padding-left: 13px;
          }
          .inputBox {
            position: relative;
            input {
              box-sizing: border-box;
              width: 120px;
              height: 32px;
              background-color: #f5f5f5;
              border-radius: 4px;
              border: solid 1px #e5e5e5;
              padding-left: 10px;
              padding-right: 45px;
            }
            span {
              font-size: 14px;
              color: #555555;
              position: absolute;
              top: 50%;
              right: 10px;
              transform: translate(-50%, -50%);
            }
          }
          .to {
            font-size: 13px;
            color: #888888;
            padding: 0 6px;
          }
        }
      }
      .tips {
        font-size: 14px;
        color: #888888;
        padding-top: 20px;
        padding-bottom: 10px;
      }
      //   table
      table {
        thead {
          img {
            width: 5px;
            height: 10px;
            vertical-align: 0;
            margin-right: 2px;
            cursor: pointer;
          }
          tr {
            th:nth-child(1) {
              text-align: left;
              padding-left: 52px;
              width: 325px;
            }
            th:last-child {
              width: 140px;
            }
          }
        }
        tbody {
          tr {
            height: 77px;
            td {
              text-align: center;
            }
            td:nth-child(2) {
              font-size: 16px;
              color: #ea1a0d;
            }
            td:nth-child(3) {
              font-size: 16px;
              color: #222222;
            }
            td:nth-child(4) {
              font-size: 16px;
              color: #222222;
            }
            td:nth-child(5),
            td:nth-child(6) {
              font-size: 16px;
              color: #fd7f2c;
            }
          }
        }
        .goodsBox {
          cursor: pointer;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding-left: 26px;
          .avator {
            width: 50px;
            height: 50px;
            border-radius: 6px;
            border: 1px solid #e5e5e5;
            margin-right: 15px;
          }
          .source {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
          p {
            font-size: 16px;
            color: #222222;
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
          }
        }
        .checkImg {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
      }
      // 按钮
      .optionBtnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 106px;
        margin-bottom: 35px;
        button:nth-child(1) {
          width: 115px;
          height: 40px;
          border-radius: 4px;
          border: solid 1px #1879ff;
          font-size: 14px;
          color: #1879ff;
        }
        button:nth-child(2) {
          width: 115px;
          height: 40px;
          background-color: #1879ff;
          border-radius: 4px;
          font-size: 14px;
          color: #ffffff;
          margin-left: 50px;
        }
      }
    }
  }
  // 预算
  .budgetBox {
    background-color: #ffffff;
    min-height: 622px;
    padding: 20px;
    .topBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .leftBox {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        p {
          font-size: 14px;
          color: #888888;
          padding-left: 10px;
        }
        .notice-box {
          display: inline-block;
          width: 4px;
          height: 16px;
          border-radius: 100px;
          margin-right: 6px;
          background-color: #fd7f2c;
          margin-top: 1px;
        }
        > div {
          font-size: 16px;
          color: #222;
          font-weight: 600;

          display: flex;
          align-items: center;
        }
      }
      .rightText {
        font-size: 14px;
        color: #fd7f2c;
        cursor: pointer;
        > img {
          width: 7px;
          height: 11px;
          margin-left: 5px;
          margin-top: -3px;
        }
      }
    }
    .budgetRadio {
      width: 954px;
      margin: 0 auto;
      margin-top: 53px;
      display: flex;
      justify-content: space-between;
      .radioItem {
        cursor: pointer;
        width: 140px;
        height: 100px;
        border: 1px solid #f1f1f1;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        p {
          text-align: center;
        }
        p:nth-child(1) {
          font-size: 20px;
          color: #555555;
          font-weight: normal;
        }
        p:nth-child(2) {
          font-size: 14px;
          color: #888888;
        }
        .myPrice {
          border: none;
          border-bottom: 1px solid #b5b5b5;
          width: 62px;
          padding: 2px 5px;
          background-color: transparent;
          margin-bottom: 5px;
          font-size: 16px;
          color: #fd7f2c;
          text-align: center;
        }
        input::-webkit-input-placeholder {
          color: #b5b5b5 !important;
        }
      }
      .activePrice {
        width: 140px;
        height: 100px;
        border-radius: 10px;
        border: solid 2px #fd7f2c;
      }
      .activeText {
        color: #ff924b !important;
      }
    }
    .buttonBox {
      width: 456px;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;
      margin-top: 90px;
      button:nth-child(1) {
        width: 115px;
        height: 40px;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        font-size: 14px;
        color: #fd7f2c;
      }
      .matchBtn {
        width: 115px;
        height: 40px;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 14px;
        color: #ffffff;
      }
      .matchBtn01 {
        background-color: #cfcfcf;
      }
      button:last-child {
        width: 115px;
        height: 40px;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        font-size: 14px;
        color: #fd7f2c;
      }
    }
  }
}
// 联系客服
.message_content img {
  width: 70px;
  height: 70px;
  margin-bottom: 6px;
}
.message_content {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  text-align: center;
}
.kefuText {
  font-size: 22px;
  color: #ff7419;
  // font-family: DINAlternate-Bold;
}
.kefuText01 {
  font-size: 14px;
  color: #555;
}
.boxShow {
  background-color: #ffffff;
  width: 1200px;
  height: 692px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 66;
  font-size: 14px;
  font-weight: normal;
  color: #222222;
  position: relative;
  &::after {
    width: 100%;
    height: 100%;
    content: "";

    background: url("../../../../assets/li/budget.png") no-repeat;
    z-index: 66;
    filter: blur(10px);
  }
  .boxShow_02 {
    z-index: 68;
    position: absolute;
  }
}
.matching02 {
  width: 115px;
  height: 40px;
  background-color: #fd7f2c;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  margin-top: 100px;
  z-index: 68;
  position: absolute;
}
</style>
